<template>
	<div class="admin">
		<div class="addbox">
			<el-button type="primary" @click="add">新增</el-button>
		</div>
		<div class="tabbox">
			<Bluetable :tHead="tHead" :tData="tableData" @operateClick="operateClick"></Bluetable>
			<pagination :total="query.total" :page.sync="query.page" :limit.sync="query.limit" @pagination="getList" />
		</div>
		<AddRole ref='AddRole' :openType="openType"></AddRole>
	</div>
</template>

<script>
	import AddRole from "./components/addRole";
	export default {
		components: {
			AddRole
		},
		name: "Role",
		data() {
			return {
				query: {
					total: 0,
					page: 1,
					limit: 10
				},
				tHead: [
					{
						prop: "aa",
						label: "角色名称"
					},
					{
						prop: "aa",
						label: "系统角色"
					},
					{
						prop: "aa",
						label: "描述"
					},
					{
						label: "操作",
						operate: ["查看","编辑", "删除"]
					}
				],
				tableData: [{
					aa: "aa"
				}],
				openType: ""
			}
		},
		mounted () {
			this.getList();
		},
		methods: {
			async getList() {
				let res = await this.$uc.getRole();
				console.log(res)
			},
			operateClick(item, row) {
				if (item == "编辑") {
					this.openType = "edit";
					this.$refs.AddRole.show();
				} else if (item == "删除") {
					this.$confirm('确定删除该角色?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}else if(item == "查看"){
					this.openType = "look";
					this.$refs.AddRole.show();
				}
			},
			add() {
				this.openType = "add";
				this.$refs.AddRole.show();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.admin {
		padding: 18px;

		.addbox {
			text-align: right;
		}

		.tabbox {
			margin-top: 18px;
		}
	}
</style>
